<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>粉丝 - {:config('web.WEB_TIT')}</title>
		{include file="member/public"}
		<link rel="stylesheet" type="text/css" href="__HOME__/member_style/css/swiper-3.4.2.min.css" />
		<script src="__HOME__/member_style/js/swiper-3.4.2.min.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>
		<header data-am-widget="header" class="am-header am-header-default jz">
			<div class="am-header-left am-header-nav">
				<a href="javascript:history.back()" class="">
					<i class="am-icon-chevron-left"></i>
				</a>
			</div>
			<h1 class="am-header-title">
		          <a href="#title-link" >粉丝</a>
		      </h1>
		</header>

		<div class="tabs" style="margin-top: 0.2rem;">
			<!--选项卡标题-->
			<div class="tab_title">
				<a href="#" class="active">全部</a>
				<a href="#">直邀</a>
				<a href="#">推荐</a>
			</div>
			<!--选项卡底部line-->
			<div class="tab_line">
				<span class="active_line"></span>
				<span></span>
				<span></span>
			</div>
		</div>

		<!--选项卡容器-->
		<div id="tabs-container" class="swiper-container">
			<div class="swiper-wrapper">
				<!--第一页内容-->
				<div class="swiper-slide">
					<div class="content-slide ">
						1111111111111111111111111111
					</div>
				</div>
				<!--第二页内容-->
				<div class="swiper-slide">
					<div class="content-slide">
						2222222222222222222222222222
					</div>
				</div>
				<div class="swiper-slide">
					<div class="content-slide">
						3333333333333333333333333333
					</div>
				</div>
			</div>
		</div>

	</body>
	<script type="text/javascript">
		window.onload = function() {
			var tabsSwiper = new Swiper('#tabs-container', {
				speed: 500,
				autoHeight: true,
				onSlideChangeStart: function(swiper) {
					$(".tabs .active").removeClass('active')
					$(".tabs .active_line").removeClass('active_line')
					$(".tabs a").eq(swiper.activeIndex).addClass('active')
					$(".tabs span").eq(swiper.activeIndex).addClass('active_line')
				}
			})
			$(".tabs a").on('touchstart click', function(e) {
				e.preventDefault()
				$(".tabs .active").removeClass('active')
				$(".tabs .active_line").removeClass('active_line')
				$(this).addClass('active')
				$(this).addClass('active_line')
				tabsSwiper.slideTo($(this).index())
			})

		}
	</script>

</html>